<html>
<header>
</header>
<body>
<style>
body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0}
.example{background:#FFF;width:1000px;height:500px;font-size:80%;border:1px #000 solid;margin:0.5em 10% 0.5em;padding:1em 2em 2em;-moz-border-radius:3px;-webkit-border-radius:3px}
.example .players{float:left;margin:10px}
</style>
<div class="example">

    <div>
        <div class="players">
            <h2>Audio player</h2>

            <div class="jp-audio">
                <div class="jp-type-single">
                    <div id="jquery_jplayer_1" class="jp-jplayer"></div>
                    <div id="jp_interface_1" class="jp-interface">
                        <ul class="jp-controls">
                            <li><a href="#" class="jp-play" tabindex="1">play</a></li>
                            <li><a href="#" class="jp-pause" tabindex="1">pause</a></li>
                            <li><a href="#" class="jp-stop" tabindex="1">stop</a></li>
                            <li><a href="#" class="jp-mute" tabindex="1">mute</a></li>
                            <li><a href="#" class="jp-unmute" tabindex="1">unmute</a></li>
                        </ul>
                        <div class="jp-progress">
                            <div class="jp-seek-bar">
                                <div class="jp-play-bar"></div>
                            </div>
                        </div>
                        <div class="jp-volume-bar">
                            <div class="jp-volume-bar-value"></div>
                        </div>
                        <div class="jp-current-time"></div>
                        <div class="jp-duration"></div>
                    </div>
                    <div id="jp_playlist_1" class="jp-playlist">
                        <ul>
                            <li>Audio track</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
</div>

<?php
	if ( function_exists('mp3j_flag') ) { mp3j_flag(); }
	if ( function_exists( 'mp3j_grab_library' ) ) { 
	    $lib = mp3j_grab_library();
	    //print_r($lib);
	    $files = $lib['filenames'];
	    shuffle( $files );
	    $files = array_slice( $files, 0, 1 );
	    mp3j_set_meta( $files );
	    mp3j_put( 'feed' );
	}
?> 
<script>
$(document).ready(function(){

    $("#jquery_jplayer").jPlayer({
        ready: function () {
            $(this).jPlayer("setMedia", {
                mp3: "../../uploads/2011/04/media/Penda Yoro.mp3",
            }).jPlayer("play"); // auto play
        },
        ended: function (event) {
            $(this).jPlayer("play");
        },
        swfPath: "swf",
        supplied: "mp3"
    })
    .bind($.jPlayer.event.play, function() { // pause other instances of player when current one play
            $(this).jPlayer("pauseOthers");
    });
});
</script>
</body>
</html>